<script setup>
// 导入相关函数
import { useAttrs, inject } from 'vue';

// https://v3.cn.vuejs.org/api/sfc-script-setup.html#defineprops-和-defineemits
// 在 <script setup> 中必须使用 defineProps 和 defineEmits API 来声明 props 和 emits
// defineProps 和 defineEmits 都是只在 <script setup> 中才能使用的编译器宏。
// 他们不需要导入且会随着 <script setup> 处理过程一同被编译掉。
const props = defineProps({
    item: { type: Object , required: true },
    ordinal: { type: Number , required: true }
});

// 获取在父组件中指定的 non-prop 的 attribute
const attrs = useAttrs();
console.log( attrs );

// 注入 items 数组
const items = inject( 'items' );
console.log( 'CartItem: ' , items );

function remove( id ){
  console.log( 'id: ' , id);
  let index = items.findIndex( item => item.id == id );
  items.splice( index , 1 );
}
</script>

<template>
    <div class="item">
        <span class="ordinal">{{ props.ordinal }}</span>
        <span class="name">{{ item.name }}</span>
        <span class="price">{{ item.price }}</span>
        <span class="amount">{{ item.amount }}</span>
        <span class="subtotal">{{ item.price * item.amount }}</span>
        <span class="operation">
            <a @click="remove(item.id)">删除</a>
        </span>
    </div>
</template>

<style scoped>
.item {
  display: flex;
  line-height: 50px;
  text-align: center;
}
.ordinal {
  flex-basis: 10%;
}
.name {
  flex-basis: 40%;
}
.price {
  flex-basis: 10%;
}
.amount {
  flex-basis: 20%;
}
.subtotal {
  flex-basis: 10%;
}
.operation {
  flex-basis: 10%;
}
.operation>a {
  padding: 5px;
  cursor: pointer;
  background: #00f;
  color: #fff;
  user-select: none;
}
</style>